<template>
    <div class="btn" @click="toggleDark()" @contextmenu.prevent="">
        <div class="relative w-full h-full">
            <div class="switch"></div>
        </div>
    </div>
</template>

<script setup>
import { watch } from "vue";
import { useDark, useToggle } from "@vueuse/core";
import { useStore } from "../store";
const store = useStore()
const isDark = useDark({
    selector: "html",
    valueDark: "dark",
    valueLight: "",
});
watch(isDark,(n,o)=>{
    store.setData("isDark",n)
})

const toggleDark = useToggle(isDark);

</script>

<style lang="scss" scoped>
.btn {
    @apply transition-all fixed top-8 right-28 h-6 w-16 rounded-xl opacity-75 bg-light-500;
}

.dark .btn {
    @apply bg-dark-400;
}

.switch {
    @apply bg-gray-400 transition-all w-4 h-4 absolute top-1 left-1 rounded-1;
}

.dark .switch {
    @apply bg-gray-600 left-11;
}
</style>